<!DOCTYPE html>
<html>
<head>
    <title>上班打卡</title>
    <%include("/app/resapi/mobilestyle.html"){}%>
    <link rel="stylesheet" href="/module/clock/style.css">
    <style type="text/css">
        .list-item {
            height: 100px;
        }

        .clock .flip {
            width: 50px;
        }
    </style>
</head>
<body>
<section class="g-flexview">
    <section class="g-scrollview">
        <div class="m-cell">
            <div class="cell-item" style="padding-left:0.12rem;padding-top: 10px;" align="center">
                <div class="clock">
                    <div class="flip">
                        <div class="digital front" data-number="0"></div>
                        <div class="digital back" data-number="1"></div>
                    </div>
                    <div class="flip">
                        <div class="digital front" data-number="0"></div>
                        <div class="digital back" data-number="1"></div>
                    </div>
                    <em class="divider">:</em>
                    <div class="flip">
                        <div class="digital front" data-number="0"></div>
                        <div class="digital back" data-number="1"></div>
                    </div>
                    <div class="flip">
                        <div class="digital front" data-number="0"></div>
                        <div class="digital back" data-number="1"></div>
                    </div>
                    <em class="divider">:</em>
                    <div class="flip">
                        <div class="digital front" data-number="0"></div>
                        <div class="digital back" data-number="1"></div>
                    </div>
                    <div class="flip">
                        <div class="digital front" data-number="0"></div>
                        <div class="digital back" data-number="1"></div>
                    </div>
                </div>
            </div>
            <div class="cell-item">
                <div class="cell-left">考勤规则：</div>
                <div class="cell-right">${attendConfig.title}</div>
            </div>
            <div class="cell-item">
                <div class="cell-left">经纬度：</div>
                <div class="cell-right">经度:<span style="margin: 20px;" id="lng"></span>纬度：<span id="lat"></span></div>
            </div>
            <div class="cell-item">
                <div class="cell-left">打卡地点：</div>
                <div class="cell-right" id="location"></div>
            </div>
            <div class="cell-item">
                <div class="cell-left">打卡说明：</div>
            </div>
            <div class="cell-item" style="padding: 0.24rem;">
                <textarea class="form-control" rows="5" id="remark"></textarea>
            </div>
            <div class="cell-item" style="margin-top: 20px;padding: 0.24rem;padding-bottom: 20px;" align="center">
                <a href="javascript:void(0);" class="btn btn-success js-save" style="width:100%">上班打卡</a>
            </div>
        </div>
    </section>
</section>
<div id="orgselectdiv"></div>
<%include("/app/resapi/mobilejs.html"){}%>
<script src="/module/clock/script.js"></script>

<script type="text/javascript" src="/module/fileupload/ajaxfileupload.js"></script>
<script>
    var beginTime = "${attendConfig.beginTime}";
    var isAttend = ${isAttend};
    var dialog = YDUI.dialog;
    var type = "0";
    $(function () {
        if (!isAttend) {
            $(".js-save").unbind("click").click(function () {
                doAttend();
            })
            getAttendType(beginTime);
        } else {
            $(".js-save").html("已打卡").attr("disable", "disable");
        }
        getLocation();
    })

    function getAttendType(beginTime) {
        var nowTime = getTime();
        if (beginTime > nowTime) {
            $(".js-save").html("上班打卡");
        } else {
            type = '1';
            $(".js-save").html("补打说明");
        }
    }

    function getLocation() {
        try {
            info = getGpsInfo.getLocationInfo();
            var locationjson = JSON.parse(info);
            $("#lng").html(locationjson.lng);
            $("#lat").html(locationjson.lat);
            showPositions(locationjson.lat, locationjson.lng);
        } catch (e) {
            $("#lng").html("未知");
            $("#lat").html("未知");
        }

    }

    function doAttend() {
        $.ajax({
            url: "/set/oaset/insertAttend",
            type: "post",
            dataType: "json",
            data: {
                status: '1',
                time: getTime(),
                type: type,
                location: $("#location").text(),
                longitude: $("#lng").text(),
                latitude: $("#lat").text(),
                remark: $("#remark").val()
            },
            success: function (data) {
                if (data.status == "500") {
                    console.log(data.msg);
                } else if (data.status == "100") {
                    layer.msg(data.msg);
                } else {
                    layer.msg(data.msg);
                    window.location.reload();
                }
            }
        });
    }

    function getTime() {
        var myDate = new Date();
        var h = myDate.getHours(); //获取当前小时数(0-23)
        var m = myDate.getMinutes(); //获取当前分钟数(0-59)
        var s = myDate.getSeconds();
        var now = getNow(h) + ':' + getNow(m) + ":" + getNow(s);
        return now;
    }

    function showPositions(lat, lng) {
        $.ajax({
            url: "/mobile/mobileget/getLocation",
            type: "post",
            dataType: "json",
            data: {
                lng: lng,
                lat: lat
            },
            success: function (data) {
                if (data.status == "500") {
                    console.log(data.msg);
                } else if (data.status == "100") {
                    layer.msg(data.msg);
                } else {
                    $("#location").html(data.list.result.formatted_address);
                }
            }
        });
    }
</script>
</body>
</html>
